提升效能重要的觀念

如何提升element放進dom的速度呢?

<文章列表>
IT人生組文章
--9/23 : 推薦大家看半澤直樹
http://ithelp.ithome.com.tw/question/10128756
--9/22 : 不要在電梯裡面討論HTML
http://ithelp.ithome.com.tw/question/10128407
--9/21 : IT人的人生觀
http://ithelp.ithome.com.tw/question/10128168
--9/20 : IT人的創意
http://ithelp.ithome.com.tw/question/10127866
--9/19 : 程式設計師的成就感
http://ithelp.ithome.com.tw/question/10127573

開發技術組文章
--9/23 : jQuery套件開發(八)，怎麼樣把element 放進DOM中才好呢。
http://ithelp.ithome.com.tw/question/10128771
--9/22 : jQuery套件開發(七)，實作套件。
http://ithelp.ithome.com.tw/question/10128406
--9/21 : jQuery套件開發(六)，套件的整個流程的小構思。
http://ithelp.ithome.com.tw/question/10128176
--9/20 : jQuery套件開發(五)，套件的定義
http://ithelp.ithome.com.tw/question/10127881
--9/19 : jQuery套件開發(四)，預設值與設定值的差別
http://ithelp.ithome.com.tw/question/10127575

全列表
http://ithelp.ithome.com.tw/ironman6/player/sheephead081/alll/1
今天我們把腳步放慢一點
來討論怎麼樣把element 放進DOM中才好呢?

我以前都是這樣寫的

for (var i=0; i<1000; i++)
{
    var _tr = $('<tr><td>'+ i +'</td></tr>')
      .appendTo(_tb) ;   
}

感覺很對，但實際上很慢。
因為如果以結果論，你要的只是貼完TR的結果。
在迴圈的每一次，你都用了一次$() 函式。
並貼到畫面上
會算數學都知道，你用了1000次$()這個函式跟1000次appendTo函式
還不考慮你修改畫面觸發reflow對瀏覽器的影響。

這樣寫才對

var _strNode = '' ;
for (var i=0; i<1000; i++)
{
    _strNode += '<tr><td>'+ i +'</td></tr>' ;
}
_tb.append($(_strNode)) ;

你只是在執行字串累加，最後執行了$()與append()各一次
我們會懷疑，$() 應付得了那麼大的字串
解析不用花費時間嗎?
有空可以看一下大師的文章
[
http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly
](<br />
http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly<br />
)

大師的文章有一段提到下面這種寫法
個人覺得程式可讀性滿差的。所以我不喜歡~

var arr = reallyLongArray;
var textToInsert = [];
var i = 0;
var length = arr.length;
for (var a = 0; a <length; a += 1) {
    textToInsert[i++]  = '<tr><td name="pieTD">';
    textToInsert[i++] = arr[a];
    textToInsert[i++] = '</td> </tr>' ;
  
}
$('table').append(textToInsert.join(''));

each也沒有一定要用到阿。
用for來跑，效果一樣。自己斟酌嚕。

恩，期待明天的相會喔~